var STATUS = {
    def: 0,
    pay: 1,
    deliver: 2,
    receive: 3
};
ifUser();
var searchParam = {
    userId: USER.userId,
    cPage: 1,
    pSize: 10
};
var curOrderId = '';

var OrderHeader = React.createClass({
    handleBackOffClick: function(){
        //查看商品信息列表
        window.location.href='personal.html';
    },
    render: function(){
        return (
            <header data-am-widget="header" className="am-header am-header-default am-header-fixed">
                <div className="am-header-left am-header-nav">
                    <a onClick={this.handleBackOffClick} className="widht-10s"><i className="icon_8"></i></a>
                </div>
                <h1 className="am-header-title">我的订单</h1>
                <div className="am-header-right am-header-nav am-dropdown" id="am-dropdown">
                    <a></a>
                    <div className="am-dropdown-toggle icontopmore" id="am-dropdown-toggle"></div>
                    <ul className="am-dropdown-content">
                        <li className="padding-left-20"><a href="index.html" className="font-color-45 prelative">首页</a></li>
                        <li className="am-divider"></li>
                        <li className="padding-left-20"><a href="personal.html" className="font-color-45 prelative">个人中心</a></li>
                    </ul>
                </div>
            </header>
        )
    }
});

var OrderTab = React.createClass({
    handleGetClick: function(e){
        var target = e.target;
        if(target.nodeName.toLowerCase() === 'a'){
            searchParam.status = target.parentElement.getAttribute('data-status');
            searchParam.cPage = 1;
            this.props.refreshList();
            this.props.getList(true);
        }
        e.stopPropagation();
        e.preventDefault();
    },
    render: function(){
        return (
            <div data-am-widget="tabs" className="am-tabs am-tabs-d2 font-14 bg-white am-margin-top-sm pinglun-tabs-1">
                <ul className="am-tabs-nav am-cf" onClick={this.handleGetClick}>
                    <li className="bg-white prelative am-active" data-status={''}><a>全部</a></li>
                    <li className="bg-white prelative" data-status={STATUS.pay}><a>待付款</a></li>
                    <li className="bg-white prelative" data-status={STATUS.deliver}><a>待发货</a></li>
                    <li className="bg-white prelative" data-status={STATUS.receive}><a>待收货</a></li>
                </ul>
            </div>
        )
    }
});

var OrderBlock = React.createClass({
    handleCancelClick: function(){
        curOrderId = this.props.order.id;
        this.props.showDialog('确定删除订单 '+this.props.order.orderNbr+'？');
    },
    handleDetailClick: function(){
        window.location.href='order.html?oId='+this.props.order.id;
    },
    handlePayClick: function(){
        window.location.href='pay.html?oId='+this.props.order.id;
    },
    render: function(){
        var order = this.props.order,
            money = (parseFloat(order.total_cash)).toFixed(2),
            imgsArr = [], l = order.imgs.length,
            status = order.status, statueBtns = '';
        for(var i = 0; i < l ; i++){
            imgsArr.push(
                <div className="am-u-sm-4 am-padding-right-0">
                    <img className="am-img-responsive" src={IMG_PRE+order.imgs[i].url}/>
                </div>
            );
            if(i === 2){
                break;
            }
        }
        if(status == STATUS.pay){
            statueBtns = <div>
                <span onClick={this.handlePayClick} className="order-btn-2 data-ordercancel am-margin-left-xs">立即付款</span>
                <span onClick={this.handleCancelClick} className="order-btn-3 data-ordercancel am-margin-left-xs">取消订单</span>
            </div>;
        }else if(status == STATUS.receive){
            statueBtns = <div>
                <span className="order-btn-2 am-margin-left-xs" onClick={this.handleDetailClick}>确认收货</span>
            </div>;
        }
        return (
            <div className="bg-white am-text-sm am-margin-top-xs am-padding-bottom-sm font-15">
                <div className="bg-white" onClick={this.handleDetailClick}>
                    <div data-am-widget="titlebar" className="am-titlebar am-titlebar-default box prelative">
                        <h2 className="am-titlebar-title box-1 padding-left-15px "><span className="font-color-2">订单号 {order.orderNbr}</span></h2>
                        <div className="font-color-monney font-weight  am-padding-right-sm ">{order.statusDesc}</div>
                    </div>
                </div>
                <div className="border-tops bg-white am-padding-right-sm">
                    <div className="bg-white box am-padding-top-ss am-padding-bottom-xs prelative">
                        <div className="box-1">
                            <div className="am-g">
                                {imgsArr}
                            </div>
                        </div>
                        <div className="am-padding-left-sm am-padding-right-lg am-padding-top-sm">
                            <div className="font-12 font-color-1 am-margin-top-sm am-padding-top-xs">{order.offerCnt}双</div>
                            <i className="icon-arrow-right-0"></i>
                        </div>
                    </div>
                </div>
                {status == STATUS.pay ?
                    <div className="am-padding-top-sm border-tops am-padding-bottom-sm box">
                        <div className="font-12 am-padding-left-sm font-color-1">晚上12点前未付款，将关闭订单</div>
                    </div> : ''}
                <div className=" am-padding-right-sm border-tops am-padding-left-sm am-padding-top-sm am-text-right">
                    <div className="box">
                        <div className="box-1 padding-top-2 font-14 am-text-left">合计：<span className="font-color-monney">&yen;{money}</span></div>
                        {statueBtns}
                    </div>
                </div>
            </div>
        )
    }
});

var OrderList = React.createClass({
    render: function(){
        var ordersArr = [];
        this.props.orders.forEach(function(value){
            ordersArr.push(<OrderBlock order={value} showDialog={this.props.showDialog}/>);
        }.bind(this));
        return (
            <div className="margin-top-50" id="order_list">
                {ordersArr}
            </div>
        )
    }
});

var Page = React.createClass ({
    getInitialState: function() {
        return{
            dialogHidden: true,
            dialogMsg: '',
            isLast: false, //是否搜索至最后一页
            status: '',
            isLoading: false, //是否正在加载
            orders: []   //结果列表
        }
    },
    componentWillMount: function(){
        var type = getURLParameter("type");
        searchParam.status = type;
        this.getOrderList();
    },
    componentDidMount: function() {
        var type = getURLParameter("type");
        window.onscroll = this.load;
        $('.bg-white .prelative').removeClass('am-active');
        var tabs = $('.bg-white .prelative');
        $.each(tabs,function (i,t) {
            if($(t).attr("data-status") == type){
                $(t).addClass("am-active");
            }
        });
    },
    load: function() {
        if(!this.state.isLoading && (getClientHeight() + getDocumentTop() >= getScrollHeight())){
            this.getOrderList();
        }
    },
    refreshList: function(){
        this.setState({
            isLast: false
        })
    },
    showDialog: function(msg){
        this.setState({
            dialogHidden: false,
            dialogMsg: msg
        });
    },
    closeDialog: function(){
        this.setState({
            dialogHidden: true
        });
    },
    getOrderList: function(flag) {
        if(!flag && this.state.isLast){
            return false;
        }
        if(!flag && this.state.isLast){
            searchParam.cPage--;
        }
        this.setState({
            isLoading: true
        });
        $.ajax(
            getAjaxOps('/order/qryOrderList', searchParam)
        ).done(function (res) {
                if(res.resultCode == 0){
                    this.setState({
                        isLoading: false
                    });
                    if(flag){
                        this.setState({
                            orders: res.data.list
                        });
                    }else {
                        Array.prototype.push.apply(this.state.orders,res.data.list);
                    }
                    this.setState({
                        orders: this.state.orders
                    });
                    if(!res.data.lastPage){
                        searchParam.cPage++;
                    }else{
                        //最后一页
                        this.setState({
                            isLast: true
                        })
                    }
                }
            }.bind(this));
    },
    deleteOrder: function(){
        //取消订单
        $.ajax(
            getAjaxOps('/order/updateStatus', {
                orderId: curOrderId,
                status: 0
            })
        ).done(function (res) {
                if(res.resultCode == 0){
                    this.getOrderList(true);
                }
            }.bind(this));
    },
    render: function() {
        return (
            <div>
                <OrderHeader/>
                <section id="amz-main" data-tag="css-nav">
                    <OrderTab getList={this.getOrderList} refreshList={this.refreshList}/>
                    <OrderList orders={this.state.orders} showDialog={this.showDialog}/>
                </section>
                <Dialog hidden={this.state.dialogHidden} msg={this.state.dialogMsg} on={this.deleteOrder} close={this.closeDialog}/>
            </div>
        )
    }
});

ReactDOM.render(
    <Page />,
    document.getElementById('root')
);
